<template>
  <div class="all_wrap">
    <div v-if="songList.length > 0" class="song_list">
      <div class="created_list">
        <!-- <div class="title">{{ "我" }}创建的歌单（{{ createList.length }}）</div> -->
        <div class="list_wrap">
          <div
            class="item_wrap"
            v-for="(item, index) in songList.slice(0, 10)"
            :key="index"
          >
            <div class="item">
              <div @click="ToDetail(item.id)" class="cover">
                <el-image :src="item.coverImgUrl" fit="cover"></el-image>
              </div>
              <div class="name">{{ item.name }}</div>
              <div class="song_count">{{ item.trackCount }}首</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getSearchList } from "util/findMusic.js";

export default {
  name: "SearchList",

  data() {
    return {
      songList: [],
    };
  },
  computed: {
    ...mapGetters("userInfo", [
      //个人信息
      "userinfo",
      //登录状态
      "loginStatus",
      //用户id
      "userId",
      //歌单
      "userPrivatePlayList",
    ]),
  },

  created() {
    this.getSearchList(1);
  },
  methods: {
    //获取歌单
    async getSearchList(page) {
      let {
        data: { result },
      } = await getSearchList(
        this.$route.params.keyword,
        20,
        (page - 1) * 20,
        1000
      );
      if (result) {
        this.songList = result.playlists;
      }
    },
    //跳转至歌单详情
    ToDetail(id) {
      this.$router.push("/songListDeatil/" + id);
    },
  },
};
</script>

<style lang="less" scoped>
.all_wrap {
  .song_list {
    width: 100%;
    .title {
      font-weight: 600;
      margin-bottom: 20px;
      font-size: 20px;
      margin-left: 2.475rem;
    }
  }

  .created_list {
    .list_wrap {
      flex-wrap: wrap;
      display: grid;
      justify-content: space-around;
      align-content: center;
      grid-template-columns: repeat(auto-fill, 18rem);
      .item_wrap {
        height: 28rem;
        .item {
          // width: 12.5rem;
          //   height: 15.625rem;
          position: relative;
          .cover {
            //   height: 13rem;
            // height: 194px;
            height: 18rem;
            .el-image {
              width: 100%;
              height: 100%;
              border-radius: 6px;
              box-shadow: 0px 2px 12px 0 rgba(0, 0, 0, 0.2);
            }
            img {
              transition: 2s;
            }
          }
          .count {
            position: absolute;
            top: 2%;
            right: 6%;
            font-size: 10px;
            color: #fff;
            .iconfont {
              font-size: 14px;
              margin-right: 3px;
            }
          }
          .name {
            width: 200px;
            color: #373737;
            font-size: 14px;
            line-height: 35px;
            font-weight: 600;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .song_count {
            font-size: 12px;
            color: #9f9f9f;
          }
        }
      }
    }
  }
}
</style>